<html>
<head>
    <meta charset="UTF-8" />
    <title>Modificar producto</title>
    <link media="screen" href="/style/main.css" type="text/css" rel="stylesheet" />
    
    <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="/js/jquery.flash.js"></script>
    
    <style type="text/css">
        #product-pic { width: 100px; }
        .hidden { display: none; }
        #pic-drawer { height: 40px; }
        .pic-buttons { position: absolute; }
        .button { 
            border: 1px solid #ddd;
            padding: 2px; background-color: white; width: 12px;
        }
    </style>
    
    <script type="text/javascript">
    $(function() {
        // preselect last submited values into the MODIFY FORM
        $("#dealer #dealer-{{product.dealer.key.id}}").attr('selected', 'selected');
        $("#brand #brand-{{product.brand.key.id}}").attr('selected', 'selected')
        $("#composition #composition-{{product.composition.key.id}}").attr('selected', 'selected')
        $("#wood #wood-{{product.wood.key.id}}").attr('selected', 'selected')
        $("#resistance #resistance-{{product.resistance.key.id}}").attr('selected', 'selected')
        
        // image add/change/delete functionality
        var currProdPicSrc = '/pix/no-foto.png'
        if($('#product-has-pic').val() == 1) {
            currProdPicSrc = '/img/{{product.key}}'
        }
        
        // handlers
        function picShowRightIcons() {
            if ($('#pic').val() == '') {
                $('#product-pic').attr('src', currProdPicSrc);
                $('#pic-x').hide();
                $('#product-pic-delete-button').show();
            } else {
                $('#product-pic').attr('src', '/pix/upload-arrow.png');
                $('#pic-x').show();
                $('#product-pic-delete-button').hide();
            }
        }
        function picDrawerHandle(){ $('#pic-drawer').toggle('hidden'); }
        function picDelete(){
            if (confirm('¿Seguro que quieres eliminar la foto?')) {
                $('#product-pic').attr('src', '/pix/no-foto.png');
                $('#pic').val('');
                $('#pic-delete-flag').val(1);
            }
        }
        
        // bind handlers on load
        picShowRightIcons();
        $('#product-pic-edit-button').click(picDrawerHandle);
        $('#product-pic').click(picDrawerHandle);
        $('#pic').blur(picDrawerHandle);
        $('#pic').change(function(){
            picShowRightIcons();
            picDrawerHandle();
            picToggleDeleteButton();
        });
        $('#pic-x').click(function() {
            $('#pic').val('');
            picShowRightIcons();
            picDrawerHandle();
        });
        $('#product-pic-delete-button').click(picDelete);
    });
    </script>
</head>

<body>
    {% if is_user_admin %}
        {% include 'admin_header.html' %}
    {% endif %}
    <div id="tabs-box">
        <a href="/">Lista</a>
        <a class="on" href="{{path}}">Editar</a>
    </div>
    <div id="tool-box" style="padding: 10px;">
    {% if product %}
    <form name="modprod" method="post" enctype="multipart/form-data">
        <input type="hidden" name="pic-delete-flag" id="pic-delete-flag" value='0'>
        <div id="pic-panel" style="float: left;">
            {% if product.pic %}
                <input type="hidden" name="product-has-pic" id="product-has-pic" value="1">
                <div class="pic-buttons">
                    <img class="clickable button" id="product-pic-edit-button" src="/pix/pencil.jpg"><br>
                    <img class="clickable button" id="product-pic-delete-button" src="/pix/trash-can.jpg">
                </div>
                <img class="clickable" id="product-pic" src="/img/{{product.key}}">
            {% else %}
                <input type="hidden" name="product-has-pic" id="product-has-pic" value="0">
                <div class="pic-buttons">
                    <img class="clickable button" id="product-pic-edit-button" src="/pix/pencil.jpg"><br>
                </div>
                <img class="clickable" id="product-pic" src="/pix/no-foto.png" />
            {% endif %}
        </div>
        <div id="form-table" style="width: 730px;">
            <div id="pic-drawer" class="row hidden">
                <label for="pic">Nueva foto</label><br>
                <input type="file" name="pic" id="pic"> <a id="pic-x" style="margin-left: 10px;" class="clear-x">X</a>
            </div>
            <div class="row">
                <input type="text" class="text longer light big" name="name" value="{{product.name}}" />
                <label for="code-generate-new">Código actual: <b>{{product.code|upper}}</b></label>
                &nbsp; &larr;<input type="checkbox" name="code-generate-new" id="code-generate-new" value="1"> Generar código nuevo
            </div>
            <div class="row">
                <label for="dealer">Distr.</label>
                <select name="dealer" id="dealer" style="width: 100px;">
                    <option value=""> - </option>
                    {% for d in entry_form_dealer_list %}
                        <option value="{{d.key}}" id="dealer-{{d.key.id}}">{{d.name|capfirst}}</option>
                    {% endfor %}
                </select>
                <label for="brand">Marca</label> 
                <select name="brand" id="brand" style="width: 100px;">
                    <option value=""> - </option>
                    {% for b in entry_form_brand_list %}
                    <option value="{{b.key}}" id="brand-{{b.key.id}}">{{b.name|capfirst}}</option>
                    {% endfor %}
                </select>
                <label for="composition">Tipo</label> 
                <select name="composition" id="composition" style="width: 100px;">
                    {% for c in entry_form_comp_list %}
                    <option value="{{c.key}}" id="composition-{{c.key.id}}">{{c.name|capfirst}}</option>
                    {% endfor %}
                </select>
                <label for="wood">Madera</label> 
                <select name="wood" id="wood" style="width: 80px;">
                    {% for w in entry_form_wood_list %}
                    <option value="{{w.key}}" id="wood-{{w.key.id}}">{{w.name|capfirst}}</option>
                    {% endfor %}
                </select>
                <label for="resistance">Resist.</label> 
                <select name="resistance" id="resistance" style="width: 60px;">
                    {% for r in entry_form_resistance_list %}
                    <option value="{{r.key}}" id="resistance-{{r.key.id}}">{{r.name|capfirst}}</option>
                    {% endfor %}
                </select>
            </div><!-- row -->
            <div class="row">
                <label for="quantity">Disponibilidad (m&sup2;)</label> <input type="text" class="text short" name="quantity" size="5" value="{{product.quantity|floatformat:0}}">
                <label for="price">Precio (€/m&sup2;)</label> <input type="text" class="text short" name="price" size="5" value="{{product.price|floatformat:2}}">
            </div>
            <div class="row" style="text-align: right; padding: 10px 10px 0px 0px; border-top: 1px solid #eee; margin-top: 40px;">
                <div style="float: left; color: #600; margin-top: 3px;">
                    Tus cambios no serán permanentes hasta los hayas guardado &rarr;
                </div>
                <a href="/admin" style="margin-right: 20px;">Cancerlar</a>
                <input type="submit" value=" Guardar " />
            </div>
        </div><!-- form-table div -->
    </form>
    {% else %}
    No hay ninún producto con ese id ({{prod_id}})
    {% endif %}
    </div>
</body>
</html>